﻿@{
    Layout = null;
}
<html>
<head>
<meta charset="UTF8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="content/minified/themes/default.min.css" type="text/css" media="all" />
<link href="content/minified/jquery.sceditor.default.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="content/minified/jquery.sceditor.bbcode.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="content/bic_calendar.css">
<link rel="stylesheet" href="content/admin.css">
<script src="content/bic_calendar.js"></script>
<style>
	.panel-body thead{
		font-weight: bolder;
		font-size: 15px;
	}
	.panel-body tbody{
		font-size: 12px;
	}
	
	.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
		background-color: #cccccc;
	}
	
	.edit-colums{
		text-align: center;
		width: 120px;
		font-size: 15px;
		width: 80px;
	}
	
	.panel-body table{
		margin-top: 10px;
	}
	
	#content-sub-home{
		width: 100%;
		position: relative;
	}
	
</style>
<script>

    //function get Comment
    function getAllComment() {
        $.ajax({
            type: "GET",
            url: "/Admin/getAllComment",
            success: function (resp) {
                var jsonData = '{"jsonData":' + resp + '}';
                var json_parse = $.parseJSON(jsonData);
                var html = '';

                for (var i = 0; i < json_parse.jsonData.length; i++) {
                    if (json_parse.jsonData[i]) {
                        var n = json_parse.jsonData[i];

                        html += '<tr>' +
                                '<td style="width: 25px;"><input type="checkbox"/></td>' +
                                '<td><xmp>' + n.content_comment + '</xmp></td>' +
                                '<td>' + n.user_name + '</td>' +
                                '<td style="width: 120px;">' + n.name_post + '</td>' +
                                '<td class="edit-colums"><a href="#"><span class="glyphicon glyphicon-edit"></span></a><strong> / </strong><a href="javascript:void(0);" onclick="deleteComment(' + n.idComment + ')"><span class="glyphicon glyphicon-remove"></span></a></td>' +
                                '</tr>';

                    }
                }

                $("#listComment").html(html);
            }
        });
    }

    //function delete Post by ID
    function deletePost(idPost) {
        $.ajax({
            type: "GET",
            url: "/Admin/deletePostByID",
            data: { idPost: idPost },
            success: function () {
                $('.post-' + idPost).animate({ opacity: '0' }, 500, function () { $('.post-' + idPost).remove(); });
            }
        });
    }

    //function get ListPost

    function getListPost() {
        $.ajax({
            type: "GET",
            url: "/Admin/getListPost",
            success: function (resp) {
                var jsonData = '{"jsonData":'+resp+'}';
                var json_parse = $.parseJSON(jsonData);
                var html = '';

                for (var i = 0; i < json_parse.jsonData.length; i++) {
                    if(json_parse.jsonData[i]){
                        var n = json_parse.jsonData[i];

                        html += '<tr class="post-' + n.idPost + '">' +
                                '<td style="width: 25px;"><input type="checkbox"/></td>' + 
                                '<td>' + n.titlePost + '</td>' +
                                '<td><xmp>' + n.contentPost + '</xmp></td>' +
                                '<td style="width: 120px;">' + n.datePost + '</td>' +
                                '<td class="edit-colums"><a href="#"><span class="glyphicon glyphicon-edit"></span></a><strong> / </strong><a href="javascript:void(0);" onclick="deletePost(' + n.idPost + ')"><span class="glyphicon glyphicon-remove"></span></a></td>' +
                                '</tr>';

                    }
                }

                $("#listPost").html(html);
            }
        });
    }

    //function goto Post by ID

    function gotoPost() {
        var idPost = $("#idPost").val();
        window.location.href = "/Post/Index/" + idPost;
    }

    //function return home admin

    function returnHome() {
        $('.home-before').slideUp(500);

        setTimeout(function () { $('.home-after').slideDown(500); }, 600);
    }

    //function Đăng bài viết mới 

    function newPost() {
        var titlePost = $("#txtTitle").val();
        var contentPost = $("#txtContentPost").sceditor('instance').val();
        var cateNamePost = $("#selectCate-1").val();

        var jsonData = [];
        var item = {};

        item["title"] = titlePost;
        item["contentPost"] = contentPost;
        item["cateNamePost"] = cateNamePost;

        jsonData.push(item);
        jsonData = jsonData[0];

        $.ajax({
            type: "POST",
            url: "/Admin/insertNewPost",
            data: jsonData,
            dataType: "html",
            success: function (resp) {
                $("#txtTitle").val('');
                $("#txtContentPost").sceditor('instance').val('');
                setTimeout(function () { $('.home-before').slideDown(500); }, 600);
                $("#idPost").val(resp);
            },
            error: function () {
                //alert("sdasd");
            },
        });
    }

    //get Cate name
    function getCateName() {

        $.ajax({
            type: 'GET',
            url: '/Admin/getCateName',
            success: function (resp) {
                var json = '{"json":' + resp + '}';
                var json_parsed = $.parseJSON(json);
                for (var i = 0; i < json_parsed.json.length; i++) {

                    var n = json_parsed.json[i];

                    $("#selectCate-1").append('<option>' + n.name_cate + '</option>');
                    $("#selectCate").append('<option>' + n.name_cate + '</option>');
                    $("#selectCate-2").append('<option>' + n.name_cate + '</option>');
                }
            }
        });
    }

    $(document).ready(function () {

        getCateName();

        $("a#sub-home").click(function () {
            $("div#content-sub-post").hide().fadeOut();
            $("div#content-sub-comment").hide().fadeOut();
            $("div#content-sub-home").show(500);
        });

        $("a#sub-post").click(function () {
            $("div#content-sub-home").hide().fadeOut();
            $("div#content-sub-comment").hide().fadeOut();
            $("div#content-sub-post").show(500);
            getListPost();
        });

        $("a#sub-comment").click(function () {
            $("div#content-sub-home").hide().fadeOut();
            $("div#content-sub-post").hide().fadeOut();
            $("div#content-sub-comment").show(500);
            getAllComment();
        });

        $("#btnSendPost").click(function () {
            $('.home-after').slideUp(500);
            newPost();
        });

        $("#btnReturn").click(function () {
            returnHome();
        });

        $("#btnGoto").click(function () {
            gotoPost();
        });

    });
</script>
</head>
<body>
	<!--start nav bar-->
	<nav id="nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="nav_container">
			<p class="navbar-brand" style="color: white;">Bizu.vn Admin Control Panel</p>
			<ul class="nav navbar-nav" style="float: right;">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Trần Lê Cường<b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="#">Đổi Mật Khẩu</a></li>
						<li class="divider"></li>
						<li><a href="#">Đăng xuất</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
	<!--end nav bar-->
	<!--start menu-->
	<nav id="menu" class="navbar navbar-default" role="navigation">
		<p class="navbar-brand"><span class="glyphicon glyphicon-home"></span> <a id="sub-home" href="#" class="navbar-link">Home</a></p>
		<ul class="nav navbar=nav">
			<li>
				<p id="sub" class="navbar-brand"><span class="glyphicon glyphicon-list-alt"></span><a id="sub-post" href="#" class="navbar-link"> Post Manager</a></p>
			</li>
            <li>
				<p id="sub" class="navbar-brand"><span class="glyphicon glyphicon-list-alt"></span><a id="sub-comment" href="#" class="navbar-link"> Comment Manager</a></p>
			</li>
			<li>
				<p id="sub" class="navbar-brand"><span class="glyphicon glyphicon-user"></span><a id="sub-user" href="#" class="navbar-link"> User Manager</a></p>
			</li>
			<li>
				<p id="sub" class="navbar-brand"><span class="glyphicon glyphicon-camera"></span><a id="sub" href="#" class="navbar-link"> Photo Manager</a></p>
			</li>
			<li>
				<p id="sub" class="navbar-brand"><span class="glyphicon glyphicon-film"></span><a id="sub" href="#" class="navbar-link"> Video Manager</a></p>
			</li>
			<li>
				<p id="sub" class="navbar-brand"><span class="glyphicon glyphicon-cog"></span><a id="sub" href="#" class="navbar-link"> Settings</a></p>
			</li>
			<li>
				<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input id="txtSearch" type="text" class="form-control" placeholder="Search">
					</div>
					<a id="sub" href="#" class="navbar-link"><span class="glyphicon glyphicon-search"></a>
				 </form>
			</li>
		</ul>
	</nav>
	<!--end menu-->
	<!--start panel-->
	<div id="panel">
		<!--start left panel-->
		<div class="panel-left">
            <!--start comment-manager-->
			<div id="content-sub-comment" style="display: none;">
				<div class="panel panel-primary">
					<div class="panel-heading">Quản Lý Comment</div>
					<div class="panel-body">
						<div id="post-form">
							<ul class="filter-form">
								<li><span id="lbl" class="label label-primary">Lọc Theo Chuyên Mục</span></li>
								<li>
									<select id="selectCate-2" class="form-control">

									</select>
								</li>
							<table class="table table-bordered table-hover table-striped table-condensed">
								<thead>
									<tr>
										<td><input type="checkbox"/></td>
										<td>Nội Dung Comment</td>
										<td>Thành Viên</td>
										<td>Bài Viết</td>
										<td>Sửa/Xóa</td>
									</tr>
								</thead>
								<tbody id="listComment">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<!--end comment-manager-->
			<!--start post-manager-->
			<div id="content-sub-post" style="display: none;">
				<div class="panel panel-primary">
					<div class="panel-heading">Quản Lý Bài Viết</div>
					<div class="panel-body">
						<div id="post-form">
							<ul class="filter-form">
								<li><span id="lbl" class="label label-primary">Lọc Theo Chuyên Mục</span></li>
								<li>
									<select id="selectCate" class="form-control">

									</select>
								</li>
							<table class="table table-bordered table-hover table-striped table-condensed">
								<thead>
									<tr>
										<td><input type="checkbox"/></td>
										<td>Tiêu Đề</td>
										<td>Nội Dung</td>
										<td>Ngày Viết</td>
										<td>Sửa/Xóa</td>
									</tr>
								</thead>
								<tbody id="listPost">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<!--end post-manager-->
			<!--start new post-->
			<div id="content-sub-home" class="" style="">
				<div class="panel panel-primary">
					<div class="panel-heading">Bài Viết Mới</div>
					<div class="panel-body">
                        <div class="home-before" style="display:none;">
                            <div class="notify" style="width: 70%; margin:  0 auto; text-align: center; font-weight: bolder;">
				                <div class="messenger" >
					                <div class="alert alert-success">
						                <div class="text">Đăng Bài Thành Công</div></div></div></div>
                            <div style="width: 70%; margin: 0 auto;" text-align:center;">
                                <button id="btnReturn" class="btn btn-primary btn-block" style="width: 50%; margin: 0 auto;">Trở Lại</button>
                                <button id="btnGoto" class="btn btn-primary btn-block" style="width: 50%; margin: 10px auto;">Tới Bài Viết</button>
                                <input type="hidden" id="idPost" value="" />
                            </div>
                          </div>
                        <div class="home-after">
						    <script>
						        $(document).ready(function () {
						            var initEditor = function () {
						                $("textarea").sceditor({
						                    plugins: 'bbcode',
						                    toolbar: "bold,italic,underline|youtube,image,emoticon|link,quote|source",
						                    style: "./minified/jquery.sceditor.default.min.css"
						                });
						            };
						            initEditor();
						        });
						    </script>
						    <ul class="post-form">
							    <li><span id="lbl" class="label label-primary">Tiêu Đề Bài Viết:</span></li>
							    <li>
								    <input type="text" class="txt form-control" id="txtTitle" placeholder="Tiêu Đề Bài Viết">
							    </li>
							    <li><span id="lbl" class="label label-primary">Chuyên Mục Bài Viết:</span></li>
							    <li>
								    <select id="selectCate-1" class="form-control">
									
								    </select>
							    </li>
							    <li><span id="lbl" class="label label-primary">Nội Dung Bài Viết:</span></li>
							    <li>
								    <div class="text_comment">
									    <textarea id="txtContentPost" class="txtPost" style="width: 100%; height:250px;"></textarea>
								    </div>
							    </li>
							    <li>
								    <button id="btnSendPost" type="button" class="btn btn-primary btn-block" style="width: 150px; margin: 0 auto;">Gửi Bài Viết</button>
							    </li>
						    </ul>
					    </div>
                    </div>
				</div>
			</div>
			<!--end new post-->
		</div>
		<!--end left panel-->
		<!--start right panel-->
		<script>
		    $(document).ready(function () {
		        mesos = ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"];

		        dias = ["H", "B", "T", "N", "S", "B", "CN"];

		        $('.datePanel').bic_calendar({
		            nombresMes: mesos,
		            dias: dias,
		            show_days: true
		        });
		    });
		</script>
		<div class="panel-right">
			<div class="datePanel">
			</div>
		</div>
		<!--end right panel-->
	</div>
	<!--end panel-->
</body>
</html>
